<template>
  <div>
    <template v-if="hasChangeVal">
      <el-popover
        :placement="popoverPlacement"
        :width="popoverWidth"
        :trigger="popoverTrigger"
      >
        <ul class="popover-list-wrap">
          <li v-for="(item, index) in popoverList.original" :key="index">{{ item }}</li>
        </ul>
        <TagTooltip
          isTag
          slot="reference"
          class="show-tag"
          :textContent="content.original"
          :enableTooltip=false
        >
          <template slot="label-tag">原值：</template>
        </TagTooltip>
      </el-popover>
      <el-popover
        :placement="popoverPlacement"
        :width="popoverWidth"
        :trigger="popoverTrigger"
      >
        <ul class="popover-list-wrap">
          <li v-for="(item, index) in popoverList.present" :key="index">{{ item }}</li>
        </ul>
        <TagTooltip
          isTag
          slot="reference"
          class="show-tag"
          :textContent="content.present"
          :enableTooltip=false
        >
          <template slot="label-tag">现值：</template>
        </TagTooltip>
      </el-popover>
    </template>
    <template v-else>
      <el-popover
        :placement="popoverPlacement"
        :width="popoverWidth"
        :trigger="popoverTrigger"
      >
        <ul class="popover-list-wrap">
          <li v-for="(item, index) in popoverList.present" :key="index">{{ item }}</li>
        </ul>
        <TagTooltip isTag slot="reference" class="show-content show-tag" :textContent="content.present" />
      </el-popover>
    </template>
  </div>
</template>
<script>
import TagTooltip from './TagTooltip';
export default {
  components: { TagTooltip },
  props: {
    popoverList: {
      type: Object,
      default: () => ({ present: [], original: [] })
    },
    content: {
      type: Object,
      default: () => ({ present: '', original: '' })
    },
    tagType: {
      type: String,
      default: 'info'
    },
    hasChangeVal: {
      type: Boolean,
      default: false
    },
    popoverPlacement: {
      type: String,
      default: 'bottom-start'
    },
    popoverWidth: {
      type: String,
      default: '300'
    },
    popoverTrigger: {
      type: String,
      default: 'hover'
    }
  }
}
</script>
<style lang="less" scoped>
.show-tag {
  margin-top: 4px;
}
.show-content {
  max-width: 100%;
}
.popover-list-wrap {
  height: 200px;
  overflow: hidden;
  overflow-y: auto;
  li {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
  }
}
</style>
